<template>
  <div id="main" style="width: 80vw; height: calc(100vh - 50px); float: right"></div>
</template>

<script setup lang="ts">
import {
  defineProps,
  watch,
  defineEmits,
  onMounted,
  toRef,
  toRefs,
  ref,
  onBeforeUnmount,
} from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  ToolboxComponent,
  GridComponent,
} from "echarts/components";
import { PieChart, MapChart, BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import Loading from "@/components/loading/loading";
import axios from "@/http";
let ChinaData: any = null;
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  GridComponent,
  CanvasRenderer,
  VisualMapComponent,
  ToolboxComponent,
  MapChart,
  BarChart,
]);
const cityMenu: any = {
  上海市: "shanghai",
  云南省: "yunnan",
  内蒙古自治区: "neimeng",
  北京市: "beijing",
  台湾省: "taiwan",
  吉林省: "jiling",
  四川省: "sichuan",
  天津市: "tianjing",
  宁夏回族自治区: "ningxia",
  山东省: "shandong",
  山西省: "shanxi",
  广东省: "guangdong",
  广西壮族自治区: "guangxi",
  新疆维吾尔自治区: "xinjinag",
  江苏省: "jiangsu",
  江西省: "jiangxi",
  河北省: "hebei",
  河南省: "henan",
  浙江省: "zejiang",
  海南省: "hainan",
  湖北省: "hubei",
  湖南省: "hunan",
  澳门特别行政区: "aomen",
  甘肃省: "gansu",
  福建省: "fujian",
  西藏自治区: "xizang",
  贵州省: "guizhou",
  辽宁省: "liaoning",
  重庆市: "chongqing",
  陕西省: "sanxi",
  青海省: "qinghai",
  香港特别行政区: "xianggang",
  黑龙江省: "heilongjiang",
};
const showLoading = ref(false);
const close = ref<Function | null>(null);
const props = defineProps({
  mapOption: {
    type: Object,
    default: () => ({}),
  },
  barOption: {
    type: Object,
    default: () => ({}),
  },
  pieOption: {
    type: Object,
    default: () => ({}),
  },
  virusCity: {
    type: Object,
    default: () => ({}),
  },
  TableType: {
    type: String,
    default: "map",
  },
});
onBeforeUnmount(() => {
  close.value!();
});
const getProvinceData = () => {
  close.value = Loading(true, "地图资源加载中...");
  axios.get("/static/map/map.json").then((res) => {
    close.value!();
    ChinaData = res.data;
    ChinaData && setChart(ChinaData);
  });
};

const getCityData = (city: string) => {
  axios.get(`/static/city/${cityMenu[city]}.json`).then((res) => {
    setChart(res.data);
  });
};

const { TableType, virusCity } = toRefs(props);

watch(props.mapOption, () => {
  ChinaData && setChart(ChinaData);
});
watch(virusCity, () => {
  getCityData(virusCity.value.province);
});
watch(TableType, (newVal) => {
  trnsfromTable();
});
onMounted(() => {
  mapInit();
  getProvinceData();
});
const emit = defineEmits(["freshTable"]);

let myChart: any = null;

const setChart = (a: any) => {
  echarts.registerMap("China", a);
  let option: any = {
    map: props.mapOption,
    bar: props.barOption,
    city: props.virusCity,
  };
  myChart.setOption(option[TableType.value]);
  myChart.setOption(option[TableType.value], true);
};

const mapInit = () => {
  var chartDom = document.getElementById("main");
  myChart = chartDom && echarts.init(chartDom);
  myChart.on("click", (e: any) => {
    emit("freshTable", e);
  });
};
const trnsfromTable = () => {
  let option: any = {
    map: props.mapOption,
    bar: props.barOption,
    pie: props.pieOption,
  };
  myChart.setOption(option[TableType.value], true);
};
</script>

<style></style>
